<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- font awesome cdn link  -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 需要用到的字体图标 -->
    <!-- <i class="fa fa-github"></i> --><!-- github图标 -->
    <!-- <i class="fa fa-weibo"></i>  --><!-- 微博图标 -->
    <!-- <i class="fa fa-weixin"></i>  --><!-- 微信图标 -->
    <!-- <i class="fa fa-qq"></i>   --><!-- QQ图标 -->
    <!-- <i class="fa fa-phone"></i>   --><!-- 电话图标 -->
    <!-- <i class="fa fa-envelope"></i>   --><!-- 信封图标 -->
    <!-- <i class="fa fa-fa-map"></i>   --><!-- 地图图标 -->

    <!-- 版心 -->
    <div class="container">
        <!-- 左侧卡片部分 -->
        <div class="card">
            <div class="pic">
                <img src="./images/证件照白底.jpg" alt="">
            </div>
            <h3>曹司楠</h3>
            <span>前端工程师</span>
            <ul class="contact">
                <li>
                    <i class="fa fa-github"></i>
                </li>
                <li>
                    <i class="fa fa-weibo"></i>
                </li>
                <li>
                    <i class="fa fa-weixin"></i>
                </li>
                <li>
                    <i class="fa fa-qq"></i>
                </li>
            </ul>
            <button class="btn">联系我</button>
        </div>
        <!-- 右侧主体内容 -->
        <div class="main">
            <div class="content">
                <!-- 自我介绍部分 -->
                <div class="self-introduction">
                    <h1>个人介绍</h1>
                    <p>2019年毕业于长沙理工大学自然地理与资源环境专业专业，学校主修方向为人文地理,城市地理,经济地理等，
                        大四在湖南一家土地公司完成了3个月的实习,毕业论文方向为新型城镇化的测度与比较。
                    </p>
                    <p>大学期间学习地理学的相关知识,毕业后考研2年,目标院校专业为华东师范大学人文地理专业,遗憾败北。
                        毕业后从事测绘、规划、国土变更方向的工作，个人认为传统的测绘与地理行业发展前景有限，遂转变方向，
                        学习WebGis开发技术。</p>
                    <div class="details">
                        <div class="text-left">
                            <ul>
                                <li> <span>年龄:</span> 27</li>
                                <li> <span> 住宅：</span>赤峰市松山区</li>
                                <li> <span>手机号：</span> 15574989447</li>
                                <li> <span>Email: </span> caosinan1995@163.Com</li>
                            </ul>
                        </div>
                        <div class="text-right">
                            <ul>
                                <li> <span>岗位：</span> Web前端</li>
                                <li> <span>外语：</span>英语6级</li>
                                <li> <span>工作经验：</span>2年</li>
                                <li> <span>到职时间：</span>随时</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 技术栈部分 -->
                <div class="skill">
                    <h1>技术栈</h1>

                    <ul class="icon">
                        <li>
                            <img src="./images/icon-1.png" alt="">
                            <p>HTML5</p>
                        </li>
                        <li>
                            <img src="./images/icon-2.png" alt="">
                            <p>CSS3</p>
                        </li>
                        <li>
                            <img src="./images/icon-3.png" alt="">
                            <p>JavaScript</p>
                        </li>
                        <li>
                            <img src="./images/icon-4.png" alt="">
                            <p>SASS</p>
                        </li>
                        <li>
                            <img src="./images/icon-5.png" alt="">
                            <p>JQuery</p>
                        </li>
                        <li>
                            <img src="./images/icon-6.png" alt="">
                            <p>React.Js</p>
                        </li>
                    </ul>


                </div>
                <!-- 技能熟练度部分 -->
                <div class="capacity">
                    <h1>技能熟练度</h1>

                    <ul class="level">
                        <li class="item">
                            <div class="text">
                                <span>Html</span><span class="right">95%</span>
                            </div>
                            <div class="down">
                                <div class="top1"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>JQuery</span><span class="right">90%</span>
                            </div>
                            <div class="down">
                                <div class="top2"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>Css</span><span class="right">80%</span>
                            </div>
                            <div class="down">
                                <div class="top3"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>React</span><span class="right">75%</span>
                            </div>
                            <div class="down">
                                <div class="top4"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>JavaScript</span><span class="right">65%</span>
                            </div>
                            <div class="down">
                                <div class="top5"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>Vue</span><span class="right">65%</span>
                            </div>
                            <div class="down">
                                <div class="top5"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>PhotoShop</span><span class="right">70%</span>
                            </div>
                            <div class="down">
                                <div class="top6"></div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="text">
                                <span>Small APP </span><span class="right">70%</span>
                            </div>
                            <div class="down">
                                <div class="top6"></div>
                            </div>
                        </li>
                    </ul>

                </div>
                <!-- 学习工作经历部分 -->
                <div class="experience">
                    <h1>学习工作经历</h1>
                    <div class="text-area">
                        <span>2015-2019</span>
                        <h2>长沙理工大学 自然地理与资源环境专业</h2>
                        <p>在大学本科期间，通过专业学习掌握了地理学知识体系，
                            对人文地理，经济地理，区域规划，城市地理等有一定的了解，毕业论文《湖南省新型城镇化水平测度与比较》获得了不错的成绩。
                        </p>
                    </div>
                    <div class="text-area">
                        <span>2021-2023</span>
                        <h2>北京某信息技术有限公司 遥感事业部 数据工程师</h2>
                        <p>2021-2023年在北京一家公司工作，参与过国土变更的国家级核查，宁夏省级核查项目以及自然资源日常监测等大型项目，
                           期间也参与过三调，遥感监测，卫片执法，宗地图等部分工作。接近两年的工作让我对国土变更以及自然资源领域的工作有一定的认识。</p>
                        <p>
                            国土变更及日常监测主要是充分利用遥感（RS）技术，采用数据库空间叠加套合检验法，开展内业地类一致性核查。
                            内业核查对更新图斑和遥感监测图斑，结合遥感影像或举证照片判读，检查地类与影像或照片是否一致，未提供举证照片的检查影像
                            是否为变更后地类。
                        </p>
                    </div>
                </div>
                <!-- 联系方式部分 -->
                <div class="contact">
                    <h1>联系方式</h1>
                    <ul class="item">
                        <li>
                            <div class="icon">
                                <i class="fa fa-map"></i>
                            </div>
                            <div class="info">
                                <h3>详细地址</h3>
                                <span>赤峰市松山区</span>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="fa fa-phone"></i>
                            </div>
                            <div class="info">
                                <h3>手机号</h3>
                                <span>15574989447</span>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="fa fa-envelope"></i>
                            </div>
                            <div class="info">
                                <h3>Email</h3>
                                <span>caosinan1995@163.com</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


</body>

</html>